<widget-modal widget-modal-title="Create a New Dashboard">
    <form name="cdf" class="form" ng-submit="ctrl.submit(cdf)" novalidate>
        <form-group input="dashboardType">
            <select name="dashboardType"
                    class="form-control"
                    ng-model="ctrl.dashboardType"
                    ng-options="item.text for item in ctrl.dashboardTypes track by item.id"
                    ng-change="ctrl.setAvailableTemplates()"
                    required>
                <option value="" disabled>Select a type</option>
            </select>

        </form-group>

        <div class="form-group" ng-if="ctrl.dashboardType.id == 'team'">
            <div>
                 <span class="col-sm-8"> <label class="radio-inline" for="widgets"> <input id="widgets" type="radio" name="content" ng-model="ctrl.configureSelect" value="widgets"  ng-checked="true"> Select Widgets </label>
                <label class="radio-inline" for="templates"> <input id="templates" type="radio" name="content" ng-model="ctrl.configureSelect" value="templates"> Select Templates </label></span>
                <span class="col-sm-4 pull-left"> <i class="fa fa-stack-1x fa-info-circle pull-right" uib-tooltip = "{{ctrl.selectWidgetOrTemplateToolTip}}" tooltip-trigger="focus" tooltip-placement="top" aria-hidden="true"></i></span>
            </div>
            <br>
        </div>

        <form-group  ng-show="ctrl.configureSelect == 'templates'" input="selectedTemplate" errors="{required: 'Please select a template'}">
            <select name="selectedTemplate"
                        class="form-control"
                        ng-model="ctrl.selectedTemplate"
                        ng-options="item.name for item in ctrl.availableTemplates track by item.value"
                        required>
                    <option value="" disabled>Select a template</option>
            </select>
        </form-group>

        <form-group input="dashboardTitle" errors="{required: 'Dashboard title is required', minlength: 'Min length of 6 characters', maxlength: 'Max length of 50 characters', createError: 'Error creating dashboard. Change title and try again.', pattern : 'Special character(s) found. Please enter only letters, numbers or spaces.'}">
            <input
                type="text"
                name="dashboardTitle"
                class="form-control"
                placeholder="Dashboard title"
                ng-model="ctrl.dashboardTitle"
                required
                maxlength="50"
                autocomplete="off"
                minlength="6"
                ng-pattern="/^[a-zA-Z0-9 ]*$/"/>

        </form-group>

        <form-group input="applicationName" errors="{required: 'Application name is required', maxlength: 'Max length of 50 characters'}">
            <input
                type="text"
                name="applicationName"
                class="form-control"
                placeholder="Application name"
                ng-model="ctrl.applicationName"
                maxlength="50"
                autocomplete="off"
                required />
        </form-group>
        <p class="text-danger">{{ctrl.dupErroMessage}}</p>
        <form-group  input="configurationItemBusServ" errors="{dupBusServError: 'Existing Dashboard found for this Business Service/ Business Application combination'}">
              <div class="row">
                  <div class="col-xs-push-6 col-xs-12">
                      <i class="fa fa-stack-1x fa-info-circle" uib-tooltip = "{{ctrl.getBusSerToolText()}}" tooltip-trigger="focus" tooltip-placement="top" aria-hidden="true"></i>
                  </div>
                  <div class="col-xs-12">
                      <input
                              type="text"
                              name="configurationItemBusServ"
                              ng-model="ctrl.configurationItemBusServ"
                              class="form-control"
                              placeholder="Select a Business Service (Optional)"
                              uib-typeahead="configItem as configItem.configurationItem + ' - (' + configItem.commonName + ')' for configItem in ctrl.getConfigItem('app',$viewValue) "
                              typeahead-wait-ms="250" autocomplete="off"
                              typeahead-focus
                              typeahead-min-length="0"
                              typeahead-editable="false"
                              typeahead-no-results="noResults" />

                      <div class="form-control" ng-show="noResults">
                          No Results Found
                      </div>
                  </div>
              </div>
        </form-group>
        <form-group ng-show="ctrl.dashboardType.id != 'product'" input="configurationItemBusApp" errors="{dupBusAppError: 'Existing Dashboard found for this Business Service/ Business Application combination'}">
            <div class="row">
                <div class="col-xs-push-6 col-xs-12">
                    <i class="fa fa-stack-1x fa-info-circle" uib-tooltip = "{{ctrl.getBusAppToolText()}}" tooltip-trigger="focus" tooltip-placement="top" aria-hidden="true"></i>
                </div>
                <div class="col-xs-12">
                    <input
                            type="text"
                            name="configurationItemBusApp"
                            ng-model="ctrl.configurationItemBusApp"
                            class="form-control"
                            placeholder="Select a Business Application (Optional)"
                            uib-typeahead="configItemComp as configItemComp.configurationItem + ' - (' + configItemComp.commonName + ')' for configItemComp in ctrl.getConfigItem('component',$viewValue)"
                            typeahead-wait-ms="250" autocomplete="off"
                            typeahead-focus
                            typeahead-min-length="0"
                            typeahead-editable="false"
                            typeahead-no-results="noResults" />
                    <div class="form-control" ng-show="noResults">
                        No Results Found
                    </div>
                </div>
            </div>
        </form-group>

        <div class="form-group" ng-if="ctrl.dashboardType.id == 'team'">
            <score-settings ng-model="ctrl.scoreSettings"></score-settings>
        </div>

        <div class="button-row row text-center">
            <button type="submit" class="btn btn-primary btn-wide">Create</button>
        </div>

    </form>
</widget-modal>
